<template>
    <div class="container">
        <div class="header">
            <div style="width: 80%">
                <el-input clearable v-model="formData.name" type="textarea" placeholder="粘入智能识别"></el-input>
            </div>
            <el-button class="btn"  type="primary" @click="blurChange">读取数据</el-button>
        </div>
        <div>
            <el-switch
                v-model="state.active"
                size="large"
                active-text="从大到小"
                inactive-text="从小到大"
            />
            <el-button type="primary" @click="handleSort">排序</el-button>
            <el-button type="primary" @click="handle">打乱顺序并复制</el-button>
        </div>
        <div>
            <div v-for="(item,index) in state.tableData" :key="index">
              <div style="display: flex;">
                  <div style="width: 100px;text-align: center;" v-for="(ele,ind) in item" :key="ind">
                      {{ele}}
                  </div>
              </div>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import {ref, reactive, getCurrentInstance, onUnmounted, onMounted, watch} from "vue";
import XEUtils from "xe-utils";
import * as XLSX from "xlsx";
import {copyValue, generateRandomCancerTypes} from "@/views/Home/index";
import {saveAs} from 'file-saver';
import {ElMessage} from "element-plus";

const { proxy } = getCurrentInstance()
const formData = ref({
    name: '',
})
const props = defineProps({
    // 组件模式
    mode: {
        type: Boolean,
        default: false
    }
})

const state = reactive({
    tableData: [],
    csvValue: '',
    active: false,
})
onMounted(() => {
    if (!props.mode) {
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Enter' || event.keyCode === 13) {
                blurChange()
            }
        });
    }
})
const sortDesc = (data) => {

// 定义放大倍数（保留5位小数，放大100000倍）
    const multiplier = 100000;

// 第一步：先把每个数字放大成整数（避免浮点误差）
    for (let row of data) {
        for (let i = 0; i < row.length; i++) {
            row[i] = Math.round(row[i] * multiplier);
        }
    }

// // 第二步：对每一行进行【降序排序】（行内从大到小）
//     for (let row of data) {
//         row.sort((a, b) => b - a); // 降序
//     }

// 第三步：对每一列进行【降序排序】（列内从大到小）
    const colCount = data[0].length; // 列数，比如 3
    for (let col = 0; col < colCount; col++) {
        const currentCol = data.map(row => row[col]);
        currentCol.sort((a, b) => b - a); // 降序
        for (let row = 0; row < data.length; row++) {
            data[row][col] = currentCol[row];
        }
    }

// 第四步：把所有数字缩小回原来的小数形式
    for (let row of data) {
        for (let i = 0; i < row.length; i++) {
            row[i] = row[i] / multiplier;
        }
    }

}
const sortAec = (data) =>  {
    // 定义放大倍数（保留5位小数，所以放大10^5=100000倍）
    const multiplier = 100000;

// 第一步：先把每一行的每个元素都放大100000倍，转成整数
    for (let row of data) {
        for (let i = 0; i < row.length; i++) {
            row[i] = Math.round(row[i] * multiplier);
        }
    }
//
// // 第二步：对每一行进行升序排序，保证行内 left < mid < right
//     for (let row of data) {
//         row.sort((a, b) => a - b);
//     }

// 第三步：对每一列进行调整，使得最终列间满足 左列第i行 < 中列第i行 < 右列第i行
    const colCount = data[0].length; // 列数，这里固定是 3 列
    for (let col = 0; col < colCount; col++) {
        // 把当前列的所有行数据提取成一个一维数组
        const currentCol = data.map(row => row[col]);
        // 对这一列进行升序排序
        currentCol.sort((a, b) => a - b);
        // 再把排好序的数据塞回每一行对应的位置
        for (let row = 0; row < data.length; row++) {
            data[row][col] = currentCol[row];
        }
    }

// 第四步：把所有元素再缩小100000倍，转回小数形式
    for (let row of data) {
        for (let i = 0; i < row.length; i++) {
            row[i] = row[i] / multiplier;
        }
    }
}
onUnmounted(() => {
    window.removeEventListener('keypress', blurChange);
})

const blurChange = (val) => {
    const array = formData.value.name.split(/\r?\n/).filter(Boolean);
// 方法1：使用 map 和 split
    const result = array.map(str => str.split('\t').map(Number));
    console.log(JSON.stringify(result));
    state.tableData = result
}
const handle = () => {
    shuffle(state.tableData)
    // 转换：每一行用 '\t' 连接，然后每行末尾加 '\n'，最后拼接成一个完整字符串
    const resultString = state.tableData
        .map(row => row.join('\t'))      // 每一行数字用 Tab 分隔，如 "81\t95\t87"
        .join('\n');                     // 每一行末尾加换行符，拼接成完整字符串
    navigator.clipboard.writeText(resultString).then(() => {
        ElMessage.success(
            `复制成功`
        )
    })
}

const handleSort = () => {
    state.active ? sortDesc(state.tableData) : sortAec(state.tableData)
    ElMessage.success('排序成功，请检查每列大小，注意升序降序左右顺序会调整')
}
// Fisher–Yates 洗牌（按整列打乱）
function shuffle(data) {
// 🔁 Fisher-Yates 洗牌算法：随机打乱二维数组的行顺序
    for (let i = data.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1)); // 随机选一个索引 j
        // 交换第 i 行 和 第 j 行
        [data[i], data[j]] = [data[j], data[i]];
    }
}


</script>

<style scoped lang="scss">
.container {
  height: 100%;
  overflow-y: auto;
  background: #f7f8fa;
  margin: 10px 0;
}
.header{
  display: flex;
}
.btn{
  margin-left: 20px;
}
</style>
